<template>
  <div h-screen class="color-body">
    <Head>
      <Link rel="icon" href="kun.png" />
      <!-- <Title>按键鲲灵</Title> -->
    </Head>

    <div flex flex-col h-screen v-if="oProject">
      <MyMainMenu flex-shrink-0 />
      <div flex h0 flex-1>
        <Resource flex-shrink-0/>
        <MyDivide />
        <div w0 flex-1 of-auto>
          <NuxtPage />
        </div>
      </div>
      <MyDivide flex-shrink-0/>
      <StatusBar flex-shrink-0/>
      <GlobalEvents />
    </div>
    <div v-else>项目加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { useDark } from '@vueuse/core';
import { loadProject, oProject } from '~/models/Project'

const isDark = useDark()

onMounted(() => {
  loadProject()
  isDark.value = !!window.matchMedia("(prefers-color-scheme: dark)").matches
})
</script>